﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>TweenMax demon</title>
<script src="minified/TweenMax.min.js"></script>
<script src="minified/MorphSVGPlugin.min.js"></script>

<!--www.tweenmax.com.cn演示实例-->
<!-- Demo styles -->
<style>
body {
  background-color: #D20841;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container{
  position:absolute;
  max-width:100%;
  height:600px;
}

svg{
  max-width:100%;
  visibility:hidden;
 
}


</style>
</head>
<body>

<div class="container">
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In  -->
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<defs>
</defs>

<path id="nine" fill="none" d="M262.1,312.2l21.6-2.4c0.5,4.4,1.9,7.7,4.1,9.8c2.2,2.1,5.2,3.2,8.8,3.2
	c4.6,0,8.5-2.1,11.8-6.4c3.2-4.2,5.3-13,6.2-26.4c-5.6,6.5-12.6,9.8-21.1,9.8c-9.2,0-17.1-3.5-23.7-10.6c-6.6-7.1-10-16.3-10-27.6
	c0-11.8,3.5-21.3,10.5-28.6c7-7.2,16-10.8,26.8-10.8c11.8,0,21.5,4.6,29.1,13.7c7.6,9.1,11.4,24.2,11.4,45.1
	c0,21.3-3.9,36.7-11.8,46.1c-7.9,9.4-18.2,14.1-30.8,14.1c-9.1,0-16.5-2.4-22.1-7.3C267.3,329.1,263.7,321.9,262.1,312.2z
	 M312.7,263.4c0-7.2-1.7-12.8-5-16.8c-3.3-4-7.1-6-11.5-6c-4.1,0-7.6,1.6-10.3,4.9c-2.7,3.3-4.1,8.6-4.1,16c0,7.5,1.5,13,4.5,16.6
	c3,3.5,6.7,5.3,11.1,5.3c4.3,0,7.9-1.7,10.8-5.1C311.2,275,312.7,270,312.7,263.4z"/>
<path id="tenOne" fill="#D3EAE3" d="M273.5,339.2h-22.3V255c-8.2,7.6-17.8,13.3-28.8,16.9v-20.3c5.8-1.9,12.2-5.5,19-10.8
	c6.8-5.3,11.5-11.5,14.1-18.6h18.1V339.2z"/>
<path id="tenZero" fill="#D3EAE3" d="M344.7,222.2c11.3,0,20.1,4,26.5,12.1c7.6,9.5,11.4,25.4,11.4,47.4c0,22-3.8,37.9-11.4,47.5
	c-6.3,7.9-15.1,11.9-26.4,11.9c-11.3,0-20.5-4.4-27.4-13.1c-6.9-8.7-10.4-24.3-10.4-46.6c0-21.9,3.8-37.7,11.4-47.4
	C324.6,226.2,333.4,222.2,344.7,222.2z M344.7,240.7c-2.7,0-5.1,0.9-7.2,2.6c-2.1,1.7-3.8,4.8-4.9,9.3c-1.5,5.8-2.3,15.5-2.3,29.2
	c0,13.7,0.7,23.1,2.1,28.2c1.4,5.1,3.1,8.5,5.2,10.2c2.1,1.7,4.5,2.5,7.2,2.5s5.1-0.9,7.2-2.6c2.1-1.7,3.8-4.8,4.9-9.3
	c1.5-5.7,2.3-15.4,2.3-29.1c0-13.7-0.7-23.1-2.1-28.2c-1.4-5.1-3.1-8.5-5.2-10.3C349.8,241.6,347.4,240.7,344.7,240.7z"/>
<path id="eight" fill="none" d="M280.8,276.3c-5.8-2.4-10-5.8-12.6-10.1c-2.6-4.3-3.9-8.9-3.9-14c0-8.7,3-15.9,9.1-21.5
	c6.1-5.7,14.7-8.5,25.9-8.5c11.1,0,19.7,2.8,25.8,8.5c6.1,5.7,9.2,12.8,9.2,21.5c0,5.4-1.4,10.2-4.2,14.4c-2.8,4.2-6.8,7.4-11.8,9.7
	c6.5,2.6,11.4,6.4,14.7,11.4c3.4,5,5,10.7,5,17.2c0,10.8-3.4,19.5-10.3,26.2c-6.9,6.7-16,10.1-27.4,10.1c-10.6,0-19.4-2.8-26.5-8.3
	c-8.3-6.6-12.5-15.6-12.5-27c0-6.3,1.6-12.1,4.7-17.4C269.2,283.2,274.1,279.2,280.8,276.3z M283.4,303.7c0,6.1,1.6,10.9,4.7,14.4
	c3.2,3.4,7.1,5.2,11.8,5.2c4.6,0,8.4-1.7,11.4-5c3-3.3,4.5-8.1,4.5-14.3c0-5.5-1.5-9.8-4.6-13.2c-3.1-3.3-7-5-11.7-5
	c-5.5,0-9.5,1.9-12.2,5.6C284.7,295.3,283.4,299.3,283.4,303.7z M285.4,253.8c0,4.5,1.3,7.9,3.8,10.4c2.5,2.5,5.9,3.7,10.1,3.7
	c4.2,0,7.6-1.3,10.2-3.8c2.5-2.5,3.8-6,3.8-10.5c0-4.2-1.3-7.5-3.8-10.1c-2.5-2.5-5.8-3.8-10-3.8c-4.3,0-7.7,1.3-10.3,3.8
	S285.4,249.6,285.4,253.8z"/>  
<path id="seven" fill="none" d="M261.7,245v-20.7H338v16.2c-6.3,6.2-12.7,15.1-19.2,26.7c-6.5,11.6-11.5,23.9-14.9,37
	c-3.4,13.1-5.1,24.7-5,35h-21.5c0.4-16.1,3.7-32.5,10-49.3s14.7-31.7,25.2-44.9H261.7z"/>  
<path id="six" fill="none" d="M337.3,251.2l-21.6,2.4c-0.5-4.5-1.9-7.7-4.1-9.9s-5.1-3.2-8.7-3.2c-4.7,0-8.7,2.1-12,6.4
	c-3.3,4.2-5.3,13.1-6.2,26.5c5.6-6.6,12.5-9.9,20.7-9.9c9.3,0,17.3,3.5,24,10.6c6.6,7.1,10,16.3,10,27.5c0,11.9-3.5,21.5-10.5,28.7
	c-7,7.2-16,10.8-26.9,10.8c-11.8,0-21.4-4.6-29-13.7c-7.6-9.1-11.4-24.1-11.4-44.9c0-21.3,3.9-36.7,11.8-46.2
	c7.9-9.4,18.1-14.1,30.8-14.1c8.8,0,16.2,2.5,22,7.4C332,234.6,335.7,241.8,337.3,251.2z M286.7,299.9c0,7.3,1.7,12.9,5,16.8
	c3.3,3.9,7.2,5.9,11.4,5.9c4.1,0,7.6-1.6,10.3-4.8c2.8-3.2,4.1-8.5,4.1-15.9c0-7.6-1.5-13.1-4.4-16.6c-3-3.5-6.7-5.3-11.1-5.3
	c-4.3,0-7.9,1.7-10.9,5C288.2,288.4,286.7,293.4,286.7,299.9z"/>  
<path id="five" fill="none" d="M262,309.2l22.3-2.3c0.6,5,2.5,9,5.6,12c3.1,2.9,6.7,4.4,10.8,4.4c4.7,0,8.6-1.9,11.8-5.7
	c3.2-3.8,4.8-9.5,4.8-17.1c0-7.2-1.6-12.5-4.8-16.1c-3.2-3.6-7.4-5.4-12.5-5.4c-6.4,0-12.2,2.8-17.2,8.5l-18.1-2.6l11.4-60.6h59
	v20.9H293l-3.5,19.8c5-2.5,10.1-3.7,15.3-3.7c9.9,0,18.3,3.6,25.2,10.8c6.9,7.2,10.3,16.6,10.3,28.1c0,9.6-2.8,18.1-8.3,25.7
	c-7.6,10.3-18.1,15.4-31.5,15.4c-10.8,0-19.5-2.9-26.3-8.7C267.4,326.7,263.3,319,262,309.2z"/>  
<path id="four" fill="none" d="M305.4,339.2v-23.4h-47.7v-19.5l50.5-74h18.8v73.9h14.5v19.6h-14.5v23.4H305.4z M305.4,296.1
	v-39.8l-26.8,39.8H305.4z"/>  
<path id="three" fill="none" d="M260.9,308.3l21.6-2.6c0.7,5.5,2.5,9.7,5.6,12.6c3,2.9,6.7,4.4,11,4.4c4.6,0,8.5-1.7,11.6-5.2
	c3.2-3.5,4.7-8.2,4.7-14.1c0-5.6-1.5-10.1-4.5-13.3s-6.7-4.9-11-4.9c-2.9,0-6.3,0.6-10.3,1.7l2.5-18.2c6,0.2,10.6-1.2,13.8-3.9
	s4.8-6.5,4.8-11.1c0-3.9-1.2-7-3.5-9.4c-2.3-2.3-5.4-3.5-9.3-3.5c-3.8,0-7.1,1.3-9.8,4c-2.7,2.7-4.3,6.5-4.9,11.6l-20.6-3.5
	c1.4-7,3.6-12.7,6.5-16.9c2.9-4.2,6.9-7.5,12.1-9.9c5.2-2.4,11-3.6,17.4-3.6c11,0,19.8,3.5,26.4,10.5c5.5,5.7,8.2,12.2,8.2,19.4
	c0,10.2-5.6,18.4-16.8,24.5c6.7,1.4,12,4.6,16,9.6c4,5,6,11,6,18c0,10.2-3.7,18.9-11.2,26.1c-7.5,7.2-16.8,10.8-27.9,10.8
	c-10.5,0-19.3-3-26.2-9.1C266,326,262,318.1,260.9,308.3z"/>  
<path id="two" fill="none" d="M337.1,318.4v20.7h-78.3c0.8-7.8,3.4-15.3,7.6-22.3c4.2-7,12.6-16.3,25.1-27.9
	c10.1-9.4,16.2-15.7,18.5-19.1c3.1-4.6,4.6-9.2,4.6-13.7c0-5-1.3-8.8-4-11.5c-2.7-2.7-6.4-4-11.1-4c-4.7,0-8.4,1.4-11.1,4.2
	c-2.8,2.8-4.3,7.5-4.8,14l-22.3-2.2c1.3-12.3,5.5-21.1,12.5-26.5c7-5.4,15.7-8,26.2-8c11.5,0,20.5,3.1,27.1,9.3
	c6.6,6.2,9.9,13.9,9.9,23.1c0,5.2-0.9,10.2-2.8,15c-1.9,4.7-4.9,9.7-8.9,14.9c-2.7,3.4-7.6,8.4-14.6,14.9
	c-7,6.5-11.5,10.8-13.4,12.9c-1.9,2.1-3.4,4.2-4.6,6.2H337.1z"/>  
<path id="one" fill="none" d="M318.8,339.2h-22.3V255c-8.2,7.6-17.8,13.3-28.8,16.9v-20.3c5.8-1.9,12.2-5.5,19-10.8
	c6.8-5.3,11.5-11.5,14.1-18.6h18.1V339.2z"/>  
<path id="zero" fill="none" d="M299.4,222.2c11.3,0,20.1,4,26.5,12.1c7.6,9.5,11.4,25.4,11.4,47.4c0,22-3.8,37.9-11.4,47.5
	c-6.3,7.9-15.1,11.9-26.4,11.9c-11.3,0-20.5-4.4-27.4-13.1c-6.9-8.7-10.4-24.3-10.4-46.6c0-21.9,3.8-37.7,11.4-47.4
	C279.3,226.2,288.1,222.2,299.4,222.2z M299.4,240.7c-2.7,0-5.1,0.9-7.2,2.6c-2.1,1.7-3.8,4.8-4.9,9.3c-1.5,5.8-2.3,15.5-2.3,29.2
	c0,13.7,0.7,23.1,2.1,28.2c1.4,5.1,3.1,8.5,5.2,10.2c2.1,1.7,4.5,2.5,7.2,2.5c2.7,0,5.1-0.9,7.2-2.6c2.1-1.7,3.8-4.8,4.9-9.3
	c1.5-5.7,2.3-15.4,2.3-29.1c0-13.7-0.7-23.1-2.1-28.2c-1.4-5.1-3.1-8.5-5.2-10.3C304.5,241.6,302.1,240.7,299.4,240.7z"/>  
</svg>

</div>
<script>
var xmlns = "http://www.w3.org/2000/svg",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  container = select('.container')
  

//center the container cos it's pretty an' that
TweenMax.set(container, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -50
})

TweenMax.set('svg', {
  visibility: 'visible'
})

TweenLite.defaultEase = Elastic.easeInOut.config(1, 0.82);
var tl = new TimelineMax({paused:false, repeat:-1, yoyo:false,repeatDelay:1 });
tl.to('#tenZero', 2, {
  morphSVG:{shape:'#nine', shapeIndex:6},
  delay:1
})
.to('#tenOne', 0.5, {
  alpha:0,
  ease:Power2.easeOut
}, '-=1.5')
.to('#tenZero', 2, {
  morphSVG:{shape:'#eight', shapeIndex:6},
  delay:1
})
.to('#tenZero', 2, {
  morphSVG:{shape:'#seven', shapeIndex:18},
  delay:1
})
.to('#tenZero', 2, {
  morphSVG:{shape:'#six', shapeIndex:18},
  delay:1
})
.to('#tenZero', 2, {
  morphSVG:{shape:'#five', shapeIndex:15},
  delay:1
})
.to('#tenZero', 2, {
  morphSVG:{shape:'#four', shapeIndex:1},
  delay:1
})
.to('#tenZero', 2, {
  morphSVG:{shape:'#three', shapeIndex:2},
  delay:1
})
.to('#tenZero', 2, {
  morphSVG:{shape:'#two', shapeIndex:2},
  delay:1
})
.to('#tenZero', 2, {
  morphSVG:{shape:'#one', shapeIndex:2},
  delay:1
})
.to('#tenZero', 2, {
  morphSVG:{shape:'#zero', shapeIndex:'auto'},
  delay:1
})
.to('#tenOne', 1, {
  alpha:1,
  ease:Power2.easeOut,
  delay:2
})
.from('#tenOne', 1, { 
  scale:0.3,
  immediateRender:false,
  transformOrigin:'50% 100%',
},'-=1')
.to('#tenZero', 1, {
  ease:Power2.easeOut,
  x:'+=45'
},'-=1')
tl.timeScale(2)


        </script>
</body>
</html>